<template>
	<div class="back_contain_n">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index"
				:class="{'active': viewType == item.key}"
				@click="changeView(item)"
			>
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<!-- 头部搜索 -->
		<div class="Search_Top_Part">
			<div class="search_list">
				<div class="sb_">
					<div class="input_flex">
						<span class="search_left">设备总数：</span><span>{{qualityData.totalCount}}</span>
					</div>
					<div class="input_flex">
						<span class="search_left">生产：</span><span style="color: #2196f3;">{{qualityData.openNum}}</span>
					</div>
					<div class="input_flex">
						<span class="search_left">待机：</span><span style="color: #ff9800;">{{qualityData.waiting}}</span>
					</div>
					<!--<div class="input_flex">-->
					<!--<span class="search_left">空置：</span><span style="color: #918d8d;">{{qualityData.waiting}}</span>-->
					<!--</div>-->
				</div>
				<div>
					<div class="input_flex daterange">
						<el-input disabled clearable v-model="qualityData.dutyDay" placeholder="生产日期"></el-input>
					</div>
					<div class="input_flex">
						<el-input disabled clearable v-model="qualityData.whiteDay =='1'?'白班':'夜班'"
								  placeholder="班次"></el-input>
					</div>
					<div class="input_flex">
						<el-input disabled clearable v-model="qualityData.banzhang" placeholder="班长"></el-input>
					</div>
				</div>
			</div>
		</div>
		<!-- table -->
		<sys-table
			:tableData="qualityData.checkLines"
			:tableLoading="tableLoading"
			:tableHeader="tableHeader"
			:isOperate="false"
		>
		</sys-table>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				viewType: 'U直',
				paramList: [
					{name: "U直", key: 'U直', type: '挤塑直切'},
					{name: "伸直", key: '伸直', type: '挤塑直切'},
					{name: "普直", key: '普直', type: '挤塑直切'},
					{name: "U管成型", key: 'U管成型', type: '成型'},
					{name: "单多支", key: '单多支', type: '包装'},
					{name: "伸缩", key: '伸缩', type: '包装'},
					{name: "U型", key: 'U型', type: '包装'},
				],
				tableLoading: true, //table刷新
				tableHeader: [],

				qualityData: {
					waiting: 0,
					openNum: 0,
					totalCount: 0,
					dutyDay: '',
					whiteDay: '',
					banZhang: '',
					checkLines: [],
				},

			}
		},
		methods: {

			changeView(val) {
				this.viewType = val.key;
				this.getCheckLineListMap()
			},

			getTableHeader() {
				if (this.viewType == '单多支') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "moKuan", "columnName": "膜宽"},
						{"columnValue": "value1", "columnName": "单排包支数"},
						{"columnValue": "value2", "columnName": "单支克重"},
						{"columnValue": "value3", "columnName": "膜间距(mm)"},
						{"columnValue": "value4", "columnName": "炸膜"},
						{"columnValue": "value5", "columnName": "压管"},
						{"columnValue": "value6", "columnName": "杂质"},
						{"columnValue": "value7", "columnName": "异物"},
						{"columnValue": "value8", "columnName": "外观"},
						{"columnValue": "value9", "columnName": "切印效果"},
						{"columnValue": "value10", "columnName": "上膜平整度"},
						{"columnValue": "value11", "columnName": "机台温度（℃）"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "检测员"},
					]
				} else if (this.viewType == 'U型') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "moKuan", "columnName": "膜宽"},
						{"columnValue": "value1", "columnName": "总长(mm)"},
						{"columnValue": "value2", "columnName": "长相(mm)"},
						{"columnValue": "value3", "columnName": "短相(mm)"},
						{"columnValue": "value4", "columnName": "螺纹"},
						{"columnValue": "value5", "columnName": "间距(mm)"},
						{"columnValue": "value6", "columnName": "单支克重"},
						{"columnValue": "value7", "columnName": "异物"},
						{"columnValue": "value8", "columnName": "炸膜"},
						{"columnValue": "value9", "columnName": "气味"},
						{"columnValue": "value10", "columnName": "机台温度（℃）"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "检测员"},
					]
				} else if (this.viewType == '伸缩') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "moKuan", "columnName": "膜宽"},
						{"columnValue": "value1", "columnName": "拉伸(mm)"},
						{"columnValue": "value2", "columnName": "缩回(mm)"},
						{"columnValue": "value3", "columnName": "单管克重"},
						{"columnValue": "value4", "columnName": "间距(mm)"},
						{"columnValue": "value5", "columnName": "压印"},
						{"columnValue": "value6", "columnName": "拉力(N)"},
						{"columnValue": "value7", "columnName": "卡口"},
						{"columnValue": "value8", "columnName": "异物"},
						{"columnValue": "value9", "columnName": "尖口"},
						{"columnValue": "value10", "columnName": "扩口"},
						{"columnValue": "value11", "columnName": "缩口"},
						{"columnValue": "value12", "columnName": "封口"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "质检员"},
					]
				}else if (this.viewType == 'U直'||this.viewType == '伸直'||this.viewType == '普直') {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "value1", "columnName": "直径±0.1mm"},
						{"columnValue": "value2", "columnName": "长度±2mm"},
						{"columnValue": "value3", "columnName": "产品重量"},
						{"columnValue": "value4", "columnName": "气味"},
						{"columnValue": "value5", "columnName": "杂质"},
						{"columnValue": "value6", "columnName": "外观"},
						{"columnValue": "value7", "columnName": "壁厚≤0.02mm"},
						{"columnValue": "value8", "columnName": "尖口≥45°"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "质检员"},
					]
				} else {
					this.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "设备号"},
						{"columnValue": "planName", "columnName": "产品名称"},
						{"columnValue": "gradeValue", "columnName": "规格"},
						{"columnValue": "value1", "columnName": "管坯长度"},
						{"columnValue": "value2", "columnName": "长相"},
						{"columnValue": "value3", "columnName": "短相"},
						{"columnValue": "value4", "columnName": "螺纹"},
						{"columnValue": "value5", "columnName": "拉伸总长"},
						{"columnValue": "createTimeFt", "columnName": "检测时间"},
						{"columnValue": "userName", "columnName": "质检员"},
					]
				}
			},


			getCheckLineListMap() {
				let self = this;
				self.tableLoading = true;
				let tab = self.paramList.find((item) => item.key == this.viewType);
				let param = {processName: tab.type, processCategory: this.viewType, type: '1'};
				self.$http({
					url: "/jinl/checkLine/getCheckLineListMap",
					method: "post",
					params: param
				}).then(resp => {
					if (resp.success) {
						console.log(resp.result);
						self.tableLoading = false;
						self.getTableHeader();
						self.qualityData = resp.result;
					}
				});
			},

		},
		mounted() {
			let self = this;
			self.getCheckLineListMap()
		},

		components: {},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.search_list {
		display: flex;
		justify-content: space-between;

		.sb_ {
			margin-right: 20px;

			.input_flex {
				width: auto;
				display: flex;
				align-items: center;
			}
		}
	}

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}

			.nums {
				position: absolute;
				right: 5px;
				top: 0;
				background: #f44336;
				color: #fff;
				height: 16px;
				line-height: 16px;
				font-weight: 400;
				border-radius: 8px;
				font-size: 12px;
				padding: 0 5px;
			}
		}
	}
</style>